<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *,p{
            padding: 0;
            margin: 0;
        }
        body{
            background: antiquewhite;
        }
        h1{
            text-align: center;
            margin-bottom: 50px;
            margin-left: 30px;
        }
        .star_list{
            background: aquamarine;
            width: 16%;
            list-style: none;
            margin: 10px auto;
            position: relative;
        }
        .star_list li {
            width: 35px;
            height: 40px;
            float: left;
            margin-left: 5px;
            font-size: 35px;
            color: #cccccc;
            cursor: pointer;
        }
        .clear{
            width: 4%;
            height: 25px;
            margin-top: 15px;
            line-height: 25px;
            display: inline-block;
            background: cadetblue;
            color: #000000;
            font-size: 13px;
            border-radius: 30px;
            text-align: center;
            font-weight: bold;
        }
        .star_text{
            width: 20%;
            height: 40px;
            line-height: 50px;
            display: inline-block;
            margin-left: 30px;
            color: darkred;
        }
        .star_info{
            display: inline-block;
            position: absolute;
            left: -18%;
            margin-top: 13px;
            font-size: 15px;
            font-weight: bold;
        }
        .one{
            color: red;
        }
        .two{
            color: coral;
        }
        .three{
            color: chartreuse;
        }
        #total{
            width: 300px;
            height: 50px;
            line-height: 50px;
            font-weight: bold;
            font-size: 20px;
            margin: 20px auto;
        }
        .total_info{
            color: red;
        }

    </style>
</head>
<body>
<h1>模仿美团的星评</h1>

<ul class="star_list" data-id="1" >
    <li class="star" data-id="1">★</li>
    <li class="star" data-id="2">★</li>
    <li class="star" data-id="3">★</li>
    <li class="star" data-id="4">★</li>
    <li class="star" data-id="5">★</li>
    <p class="star_info one">服务</p>
</ul>
<p class="clear" data-id="1">清空</p>
<p class="star_text">&nbsp;</p>
<ul class="star_list" data-id="2">
    <li class="star" data-id="1">★</li>
    <li class="star" data-id="2">★</li>
    <li class="star" data-id="3">★</li>
    <li class="star" data-id="4">★</li>
    <li class="star" data-id="5">★</li>
    <p class="star_info two">质量</p>
</ul>
<p class="clear" data-id="2">清空</p>
<p class="star_text">&nbsp;</p>

<ul class="star_list" data-id="3">
    <li class="star" data-id="1">★</li>
    <li class="star" data-id="2">★</li>
    <li class="star" data-id="3">★</li>
    <li class="star" data-id="4">★</li>
    <li class="star" data-id="5">★</li>
    <p class="star_info three">效率</p>
</ul>
<p class="clear" data-id="3">清空</p>
<p class="star_text">&nbsp;</p>
<hr>
<p id="total"></p>
</body>
<script>
    //化繁为简  先死后活
    //(1):使用事件代理,点击的时候,得到当前星星所代表的id
    //(2):获取到所有的星星,循环,每次点击的时候,先将所有的星星的颜色变为 #cccccc
    //(3):得到当前星星的索引,给索引+1,如果所有的星星循环的时候的index+1,小于等于当前点击的数，将小于等于当前的数的颜色便为黄色即可


    //获取所有的ul
    let star_ul_list = document.querySelectorAll('.star_list');
    //获取所有的星星
    let li_list = document.querySelectorAll('.star');
    let clear_list = document.querySelectorAll(".clear");

    star_ul_list.forEach((selem) => {
        selem.addEventListener('click',(event) => {
            //selem代表的是当前的ul
            //代表当前的点击元素(这里指的是当前点击的li)
            let target = event.target;
            //当前点击的星星位置
            let id = target.getAttribute('data-id');
            let star_list = selem.querySelectorAll('.star');
            //获取到显示文字的元素 兄弟节点,这里需要获取的是元素节点
            //获取到当前ul下面的p
            let info_element = selem.getElementsByTagName('p')[0];
            let next_element = selem.nextElementSibling.nextElementSibling;
            star_list.forEach((elem,index) => {
                elem.style.color = "#cccccc";
                let _index = index + 1;
                if(_index <= id){
                    elem.style.color = 'yellow';
                }
            });
            next_element.innerHTML = info_element.innerHTML + id + '颗星';
            getTotalStar(li_list);
        });
    });


    Array.from(clear_list).forEach((elem,index) => {
        elem.addEventListener('click',(el,ind) => {
            let id = el.target.getAttribute('data-id');
            Array.from(star_ul_list).forEach((star_el) => {
                let star_id = star_el.getAttribute('data-id');
                //如果当前点击的清空id == 当前包含星星的Id，那么当前下面的所有星星颜色都清空
                if(id == star_id){
                    //获取到当前ul的兄弟元素的兄弟元素 .star_text
                    let next_element = star_el.nextElementSibling.nextElementSibling;
                    //获取到当前点击的ul下面的所有li
                    let ul_li_list = star_el.getElementsByTagName('li');
                    //将下面所有的li颜色清空即可
                    Array.from(ul_li_list).forEach((ul_li_el) => {
                        ul_li_el.style.color = '#cccccc';
                    });
                    next_element.innerHTML = '&nbsp';
                    getTotalStar(li_list);
                }
            });
        });
    });

    //获取星星总数
    function getTotalStar(li_list){
        //获取星星总数
        let total_star = 0;
        //获取显示星星数目的元素
        let total = document.getElementById('total');
        li_list = Array.from(li_list);
        li_list.forEach((elem) => {
            if(elem.style.color == 'yellow'){
                total_star += 1;
            }
        });
        total.innerHTML = '一共有15颗星现在得了' + '<span class="total_info">' + total_star + '</span>' + '颗星';
        setTimeout(function (){
            if(total_star == 15){
                alert("恭喜你,已经满星,得到大礼包一份.....");
            }else if(total_star == 0){
                total.innerHTML = '';
            }
        });

    }

</script>
</html>